<!DOCTYPE html>
<html lang="zh_CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--重置CSS样式  -->
    <link rel="stylesheet" href="../CSS重置样式表.html/1.CSS">
    <style>
        /* 设置整个网页的颜色 */
        body {
            background-color: beige;
        }

        /* 设置总的盒子 */
        #box {
            width: 300px;
            height: 330px;
            background-color: #FFFF;
            margin: 100px auto;
        }

        /* 设置标题样式 */
        #h3 {
            /* 使块元素变为行内块元素 */
            display: inline-block;
            /* 设置上层边框 */
            border-top: solid 1px red;
            /* 设置内边距 */
            padding-top: 13px;
            font-size: 17px;
            font-weight: bold;
        }
        /* 设置h3中小圆点 */
        #h3 span{
            font-size: 1px;
            color: #888888;
        }
        /* 设置鼠标移入时的字体变色 */
        #h3 :hover{
            color: red;
        }

        /* 设置图片样式 */
        #img {
            width: 300px;
            height: 150px;
            margin-top: 13px;
        }

        /* 设置图片中的文字*/
        #img div {
            margin-left: 40px;
            margin-top: -25px;
            font-size: 15px;
            font-weight: bold;
            color: #FFFF;
        }
        /* 设置列表 */
        #list li {
            /* 设置点形状 */
            list-style: square;
            /*设置点颜色*/
            color:#DDDDDD;
            /* 设置字体大小 */
            font-size: 14px;
            margin-top: 16px;
            margin-left: 20px;
        }
        /* 设置鼠标移入列表中超链接时的状态 */
        #list a:hover{
            color: red;
        }
    </style>
</head>

<body>
    <div id="box">
        <div id="h3"><a>军事 </a><span>·</span> <a>航空</a></div>
        <!-- 图片部分 -->
        <div id="img">
            <a href="">
                <img src="https://cms-bucket.ws.126.net/2021/1201/bf19ef63j00r3ey7x002ec000s600e3c.jpg?imageView&thumbnail=300y150&type=webp"
                    alt="">
                <div>武直空中发射火箭机头“自拍”</div>
            </a>
        </div>
        <!-- 列表部分 -->
        <ul id="list">
            <li><a href="">实拍国产防空导发射 这角度太罕见了</a></li>
            <li><a href="">女大学生士兵导弹班：操控300斤重导弹</a></li>
            <li><a href="">日本“封国”东京羽田机场大量航班取消</a></li>
            <li><a href="">航拍广西建设中的澳洲淡水龙虾基地</a></li>
        </ul>
    </div>
</body>

</html>